"use client";

import { useState, useEffect } from "react";
import { Bot, Plus, Edit, Trash2, RefreshCw } from "lucide-react";
import { llmCreateService } from "@/lib/services/llm-create";
import { LLMModelResponse, ModelStatus } from "@/lib/types/generated/llm";
import { ApiResponse } from "@/lib/types";

export default function LLMConfigPage() {
  const [models, setModels] = useState<LLMModelResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 获取模型列表
  const fetchModels = async () => {
    try {
      setLoading(true);
      const response = await llmCreateService.listModels();
      if (response.code === 200 && response.data) {
        setModels(response.data.items || []);
      } else {
        setError("获取模型列表失败");
      }
    } catch (err) {
      setError("获取模型列表时发生错误");
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 初始加载
  useEffect(() => {
    fetchModels();
  }, []);

  // 刷新模型列表
  const handleRefresh = () => {
    fetchModels();
  };

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center">
          <Bot size={24} className="mr-2 text-blue-600" />
          <h1 className="text-2xl font-bold text-gray-800">大模型配置</h1>
        </div>
        <div className="flex space-x-3">
          <button 
            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 shadow-sm"
            onClick={() => {/* 添加新模型 */}}
          >
            <Plus size={18} className="mr-2" />
            添加模型
          </button>
          <button 
            className="flex items-center px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 shadow-sm"
            onClick={handleRefresh}
          >
            <RefreshCw size={18} className="mr-2" />
            刷新
          </button>
        </div>
      </div>

      {loading ? (
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
        </div>
      ) : error ? (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
          <p>{error}</p>
        </div>
      ) : models.length === 0 ? (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg">
          <p>暂无模型数据，请添加模型</p>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm overflow-hidden">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型名称</th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型ID</th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提供商</th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模态</th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {models.map((model) => (
                <tr key={model.id} className="hover:bg-gray-50 transition-colors duration-150">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{model.name}</div>
                    <div className="text-sm text-gray-500">{model.description}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{model.model_id}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{model.provider}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{model.modality}</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                      model.status === "active" 
                        ? "bg-green-100 text-green-800" 
                        : "bg-red-100 text-red-800"
                    }`}>
                      {model.status === "active" ? "活跃" : "禁用"}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                    <button className="text-indigo-600 hover:text-indigo-900 transition-colors duration-200">
                      <Edit size={16} />
                    </button>
                    <button className="text-red-600 hover:text-red-900 transition-colors duration-200">
                      <Trash2 size={16} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
} 